// 扩展vue原有功能:全局组件,自定义指令,挂载原型方法,注意vue3没有全局过滤器
// 这就是插件

// import { isVue3 } from "vue-demi";

// vue2.0插件要素:到处一个对象,有install函数,默认传入了vue函数构造函数,在vue基础之上扩展东西
// vue3.0插件要素:到处一个对象,有install函数,默认传入了app应用实例,在app基础之上扩展东西
// import XtxSkeleton from './xtx-skeleton.vue'
// import XtxCarousel from './xtx-carousel.vue'
// import XtxMore from './xtx-more.vue'
import defaultImg from '@/assets/images/200.png'
import Confirm from './Confirm'
import Message from './Message'
// import XtxBread from './xtx-bread.vue'
// import XtxBreadItem from './xtx-bread-item.vue'

// 导入library文件夹下的所有组件
// 批量导入需要使用一个函数 require.context(dir,deep,matching)
// 参数：1. 目录  2. 是否加载子目录  3. 加载的正则匹配
const importFn = require.context('./', false, /\.vue$/)
// console.dir(importFn.keys()) // 文件路径
export default {
  install (app) {
    // 在app上进行扩展,app提供component directive
    // 但是不提供原型挂载,要挂载原型要使用app.config
    // app.component('XtxSkeleton', XtxSkeleton)
    // app.component('XtxCarousel', XtxCarousel)
    // app.component('XtxMore', XtxMore)
    // app.component('XtxBread', XtxBread)
    // app.component('XtxBreadItem', XtxBreadItem)
    // 定义指令
    // 根据keys批量注册
    importFn.keys().forEach(path => {
      const component = importFn(path).default // 导入组件
      app.component(component.name, component) // 注册组件
    })
    defindeDirective(app)
    // 定义原型函数
    app.config.globalProperties.$message = Message
    app.config.globalProperties.$confirm = Confirm
  }
}

// 定义指令
const defindeDirective = (app) => {
  // 1.图片懒加载
  // 原理 先存储图片地址 不能放在src上 当图片进入可视区 讲src的地址换成所存储的地址 将所存储的图片地址设置给图片元素即可
  app.directive('lazyload', {
    // vue2.0 监听使用指令dom是否创建好 钩子函数 inserted
    // vue3.0 的指令拥有的钩子函数和组件的一样,mounted
    mounted (el, binding) {
      // console.log('mounted')
      // 刚创建一个观察对象 观察当前使用指令的元素
      const observe = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) {
          // 停止观察
          observe.unobserve(el)
          // console.log('进入可视区')
          // 将指令上的地址给图片元素即可 指令的值设置给el.src属性 binding是一个对象 binging.value就是指令的值
          // 处理图片加载失败 error是图片加载失败的时间 load是图片加载成功
          el.onerror = () => {
            // 设置加载失败图
            el.src = defaultImg
          }
          el.src = binding.value
        }
      }, {
        threshold: 0
      })
      // 开启观察
      observe.observe(el)
    }
  })
}
